{% extends 'base.html' %}
{% block style %}
    <link rel="stylesheet" href="../static/layui/css/layui.css"/>
<link rel="stylesheet" href="../static/layui/css/modules/laydate/default/laydate.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> 

    <style>
        /*表格*/
        .table {
            width: 100%;
            margin: 0 auto;
            padding-top: 40px;
        }

        .table tr {
            height: 40px;
            align-items: center;
            font-size: 14px;
            font-family: Microsoft YaHei;
            line-height: 40px;
        }

        .table tr td {
            padding: 0 !important;
        }

        .layui-table-tool {
            font-size: 16px;
            font-family: Microsoft YaHei;
        }
        .layui-table,.layui-table-header{
            background: none!important;
        }

        /*用户信息表单*/
        #userInfo {
            width: 90%;
            margin: 0 auto;
            margin-top: 40px;
        }

        #userInfo .layui-form-item {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        #userInfo .layui-form-label {
            display: inline-block;
            padding-left: 0;
            padding-right: 0;
            text-align: left;
            width: 40%;
        }

        #userInfo .layui-input-block {
            display: inline-block;
            margin-left: 0;
            width: 75%;
        }

        #userInfo .btn {
            width: 100%;
        }

        #userInfo .btn .layui-input-block {
            width: 100%;
            margin: 0;
            display: flex;
            flex-direction: row;
            justify-content: center;
        }

        #userInfo .btn .layui-input-block .layui-btn {
            background-color: #1E9FFF;
        }

        {#下拉列表#}
        dd.layui-this {
            background-color: #1E9FFF !important;

        }

        {#头部工具#}
        .layui-table-tool {
            width: 100%;
            display: flex;
            flex-direction: row;
            background:none;
        }

        .layui-table-tool .layui-table-tool-temp {
            width: 100%;
            padding-right: 0;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        {#行内工具#}
        #operateBtn {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            width: 90%;
            margin: 0 auto;
            height: 100%;
        }

        #operateBtn a:hover {
            color: #2671EE;
        }

        #operateBtn div {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        #operateBtn div img {
            width: 20px;
            height: 20px;
            margin-right: 5px;
        }

        #operateBtn div li {
            width: 20px;
            height: 20px;
            margin-right: 5px;
            color: #2671EE;
        }

        .layui-icon-set-sm:before {
            content: "\e620";
            text-align: center;
            position: absolute;
            display: block;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
        }

        #operateBtn div .text {
            font-size: 14px;
            font-weight: 400;
            color: #009688;
            background: none;
            padding-right: 0;
        !important;
            padding-left: 0;
        !important;
        }

        {#赋权表单#}
        #userCount {
            display: flex;
            width: 220px;
            height: 150px;
            flex-direction: column;
            justify-content: space-around;
            align-content: center;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%); /*自己的50% */

        }

        #userCount div {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-content: center;
        }

        #userCount div:nth-child(2) {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-content: center;
        }

        #userCount .userCountValue {
            height: 36px;
            width: 80px;
            font-size: 16px;
            line-height: 36px;
            font-family: Microsoft YaHei;
            color: #666;
            text-align: center;
        }

        #userCount .userCountBtn {
            height: 40px;
            width: 50px;
            border-color: #1E9FFF;
            background-color: #1E9FFF;
            font-size: 25px;
            line-height: 40px;
            font-family: Microsoft YaHei;
            color: #FFFFFF;
            padding: 0;
        }

        #userCount #ok {
            font-size: 14px;
            border-radius: 2px;
            border-color: #1E9FFF;
            background-color: #1E9FFF
        }

        #userCount #cancel {
            font-size: 14px;
            border-radius: 2px;
            border-color: #1E9FFF;
            background-color: #1E9FFF
        }

        {#删除用户#}
        .layui-layer-btn {
            text-align: center !important;
        }
        .layui-table-fixed{
            display: none;
        }
    </style>

{% endblock %}

{% block content %}
    <div class="children-body" style="background-color: #ccc !important;margin: 40px;height: 80%">
        <div class="table">
            <table id="userTable" lay-size="sm" lay-filter="userTable"></table>
        </div>
    </div>
    <!--新增用户表单-->
    <div id="userInfo" style="display: none">
        <form class="layui-form" method="post" lay-filter="userInfo" id="userForm">
            <div class="layui-form-item" style="display: none">
                <div class="layui-input-block">
                    <input id="id" type="hidden" lay-verify="id" name="id" placeholder="id" autocomplete="off"
                           class="layui-input">
                            <input id="title" type="hidden" lay-verify="title" name="title" placeholder="title" autocomplete="off"
                           class="layui-input" value="1">
                </div>
            </div>
       
             <div class="layui-form-item">
                <label class="layui-form-label">机构列表:</label>
                <div class="layui-input-block">
                     <select class="selectpicker" name="jnames" id="jnames"  onclick="alert(123)">
                         <option value="0">请选择</option> 
                        {% for aaa in user_jg %} 
                       <option value="{{aaa.id}}">{{aaa.names}}</option> 
                      {% endfor %}
                      </select>
                    <input id="jidnumer" type="hidden" lay-verify="jidnumer" name="jidnumer" placeholder="请输入工号"
                           autocomplete="off"
                           class="layui-input"
                           lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item" id="passwordContainer">
                <label class="layui-form-label">地点:</label>
                <div class="layui-input-block">
                    <input id="area" type="area" lay-verify="area" name="area" placeholder="请输入地点:苏州"
                           autocomplete="off"
                           class="layui-input" readonly="true">
                </div>
            </div>
            
            <div class="layui-form-item">
                <label class="layui-form-label">时间:</label>
                <div class="layui-input-block">
                    <input id="jtime" type="text" lay-verify="jtime" name="jtime" 
                           autocomplete="off"
                           class="layui-input"
                           lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">姓名:</label>
                <div class="layui-input-block">
                    <input id="jpersonname" type="text" lay-verify="jpersonname" name="jpersonname" placeholder="请输入姓名"
                           autocomplete="off"
                           class="layui-input"
                           lay-verify="required">
                </div>
            </div>
              <div class="layui-form-item">
                <label class="layui-form-label">手机号:</label>
                <div class="layui-input-block">
                    <input id="jpersonmobile" type="text" lay-verify="jpersonmobile" name="jpersonmobile" placeholder="请输入手机号"
                           autocomplete="off"
                           class="layui-input"
                           lay-verify="required" >
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">检测内容(备注）:</label>
                <div class="layui-input-block">
                    <textarea id="jcontent" type="text" lay-verify="jcontent" name="jcontent" placeholder="请输入检测内容" style="width: 200px;height: 100px"></textarea> 
                </div>
            </div>
          
            <div class="layui-form-item btn">
                <div class="layui-input-block">
                    <button id="submitBtn" class="layui-btn" lay-submit lay-filter="add">确定</button>
                    <button id="cancelBtn" class="layui-btn" lay-submit lay-filter="cancel">取消</button>
                </div>
            </div>
        </form>
    </div>

     <!--提交核酸结果-->
    <div id="addresultform" style="display: none">
        <form class="layui-form" method="post" lay-filter="addresultform" id="addresultform">
            <div class="layui-form-item" style="display: none">
                <div class="layui-input-block">
                    <input id="hid" type="hidden" lay-verify="hid" name="hid" placeholder="hid" autocomplete="off"
                           class="layui-input" >
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">样板信息:</label>
                <div class="layui-input-block">
                     <select class="selectpicker" name="hesuan_yangben">  <option value="1">鼻咽拭子</option>  <option value="2">口咽拭子</option>  <option value="3">痰液</option> <option value="4">其他</option></select>
                      
                </div>
            </div>
            <div class="layui-form-item" id="passwordContainer">
                <label class="layui-form-label">检测日期:</label>
                <div class="layui-input-block">
                    <input id="hesuan_result_uptime" type="text" lay-verify="hesuan_result_uptime" name="hesuan_result_uptime" lay-verify="date" placeholder="yyyy-MM-dd"
                           autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">检测单位:</label>
                <div class="layui-input-block">
                    <input id="hesuan_jigou" type="text" lay-verify="hesuan_jigou" name="hesuan_jigou" placeholder="请输入检测单位"
                           autocomplete="off"
                           class="layui-input"
                           lay-verify="required" value="{{names}}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">检测结果:</label>
                <div class="layui-input-block">
                     <select class="selectpicker" name="hesuan_result">  <option value="2">阳性</option>  <option value="1">阴性</option> </select>
                </div>
            </div>
           
            <div class="layui-form-item btn">
                <div class="layui-input-block"><input id="status" type="hidden" lay-verify="status" name="status" placeholder="status" value="1">
                    <button id="submitBtn1" class="layui-btn" lay-submit lay-filter="add">添加检测结果</button>
                    <button id="cancelBtn1" class="layui-btn" lay-submit lay-filter="cancel">取消</button>
                </div>
            </div>
        </form>
    </div>

{% endblock %}
{% block script %}
<style type="text/css">
     table th  {
            background-color: #effe;
            color: #000;
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #000;
        }

       table  td {
            border-width: 1px;
            border-style: solid;
            border-color: #e6e6e6;
             border: 1px solid #000;
        }
</style>
    <script src="../static/layui/layui.js"></script>
    <script>

      
        $("#hesuan_result_uptime,#jtime").datepicker({

                            dateFormat: 'yy-mm-dd', 
                            currentText : '今天',//设置当天按钮的文本内容，此按钮需要通过showButtonPanel参数的设置才显示。
        }); 
        {#var csrftoken = "{{csrf_token()}}"#}
        layui.use([ 'table', 'layer', 'form','laydate'], function () {

            let table = layui.table;
            let form = layui.form;
            let userInfoLayer = null;
            //渲染表格
            let userTable = table.render(
                {
                    elem: "#userTable",
                    page: true,
                    limit: 15,
                    limits: [5, 10],
                    url: '/getdengji',
                    {#headers: {"X-CSRFToken": csrftoken},#}
                    method: 'GET',
                    where: {'position': 1},

                    cols: [[
                        {field: 'id', title: 'ID', align: 'center', width: '10%', fixed: 'left'},
                        // {field: 'title', title: '核酸等级', align: 'center', width: '15%', fixed: 'left'},
                          {field: 'jpersonname', title: '人员名称', align: 'center', width: '25%', fixed: 'left'},
                          {field: 'area', title: '地点', align: 'center', width: '20%', fixed: 'left'},
                           {field: 'jpersonmobile', title: '手机号', align: 'center', width: '25%', fixed: 'left'},
                        {field: 'jtime', title: '时间', align: 'center', width: '20%', fixed: 'left'},
                         {field: 'jidnumer', title: '工号', align: 'center', width: '20%', fixed: 'left'},
                          {field: 'jcontent', title: '核酸内容', align: 'center', width: '25%', fixed: 'left'},
                          {field: 'status', title: '状态', align: 'center', width: '25%', fixed: 'left'},
                          {field: 'hesuan_result', title: '核酸结果', align: 'center', width: '25%', fixed: 'left'},
                          {field: 'hesuan_result_uptime', title: '核酸时间', align: 'center', width: '25%', fixed: 'left'},
                          {field: 'hesuan_yangben', title: '核酸样板', align: 'center', width: '25%', fixed: 'left'},
                            {field: 'hesuan_jigou', title: '检测机构', align: 'center', width: '25%', fixed: 'left'},
                        {
                            field: 'operate',
                            title: '操作',
                            align: 'center',
                            width: '25%',
                            fixed: 'left',
                            toolbar: '#operate'
                        },
                    ]],
                    toolbar: '#toolbar',
                    defaultToolbar: [],
                    //表格渲染完执行
                    done: function (res, curr, count) {

                        $("[data-field='password']").css('display', 'none'); //隐藏密码
                        $("[data-field='count']").css('display', 'none'); //隐藏密码
                        //回车搜索
                        $('#keyword').bind('keyup', function (event) {
                            if (event.keyCode == '13') {
                                searchUser()
                            }
                        })
                    }
                },
            )
            // 监听行操作
            table.on('tool(userTable)', function (obj) {
                let user = obj.data
                var role_id ={{ role }}
                var user_id ={{ user_id }}
              if (role_id ==1) {
                    if (obj.event == "chkresult") {
                        chkresult(user)
                    }
                }
                //修改操作
               else if (role_id ==2) {
                    if (obj.event == "check") {
                        editUser(user)
                    }
                    if (obj.event == "addresult") {
                        addresult(user)
                    }
                    //删除操作
                   
                }else   if (obj.event == "del" && role_id==3) {
                        delUser(user)
                    } 

                else {
                    layer.msg('没有权限！',{icon:7})
                }
            })
            //监听头部工具--新增用户
            table.on('toolbar(userTable)', function (obj) {
                //新增
                if (obj.event == 'add') {
                    addUser()
                }
                //搜索
                else if (obj.event == 'search') {
                    searchUser();
                }
            })



          
           function chkresult(user) {
                layer.open({
                    title: '审核',
                    btn: ['确定', '取消'],
                    shade: 0,
                    content: '确定要通过吗？',
                    yes: function (index) {
                        $.ajax({
                            url: '/dengjicheck',
                            method: 'post',
                            {#headers: {"X-CSRFToken": csrftoken},#}
                            data: {"hid":user.id,"status":4},
                            dataType: 'JSON',
                            success: function (res) {
                                //关闭弹出层

                                layer.msg("审核成功", {icon: 6});
                                userTable.reload()

                            },
                            error: function (res) {
                                layer.msg('审核失败！', {icon: 5});
                            }
                        });
                    }
                })
            }

            //搜索
            function searchUser() {
                let hesuan_result = $('#hesuan_result').val().trim()
                let keyword = $('#keyword').val().trim()
                userTable.reload({
                    method: 'GET',
                    where: {
                        'name': keyword,
                        'hesuan_result':hesuan_result
                    },
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                })
                $('#keyword').val(keyword)
            }


            //新增
            function addUser() {
                 
                        
                //清空表单
                $('#userForm')[0].reset()
                form.render()
                userInfoLayer = layer.open({
                    title: '新增登记',
                    type: 1,
                    shade: 0,
                    area: ['480px', '650px'], //宽高
                    content: $('#userInfo'),  //调到新增页面
                     end:function (){
                        $('#userInfo').css('display', 'none')
                    },
                    success: function () {
                        $('#passwordContainer').show()
                        $("#submitBtn").attr("lay-filter", "add")
                    }
                });

                form.on('select', function(data){
                    id=data.value
                    $.ajax({
                                    url: '/user/get_user_jg_option',
                                    method: 'post',
                                    {#headers: {"X-CSRFToken": csrftoken},#}
                                    data: {id:parseInt(id)},
                                    dataType: 'JSON',
                                    success: function (res) {
                                       $("#area").val(res.area)
                                        $("#jidnumer").val(res.idnumber)
                                        
                                    },
                                    error: function (res) {
                                        layer.msg('获取参数错误');
                                    }
                                });


            });  

                form.on('submit(add)', function (obj) {
                    obj.position = 1
                    $.ajax({
                        url: '/adddengji',
                        method: 'post',
                        {#headers: {"X-CSRFToken": csrftoken},#}
                        data: obj.field,
                        dataType: 'JSON',
                        success: function (res) {
                            $('#userInfo').css('display', 'none')
                            layer.close(userInfoLayer)
                            layer.msg('新增成功！');
                            userTable.reload()
                        },
                        error: function (res) {
                            layer.msg('新增失败！');
                        }
                    });
                    //阻止表单跳转
                    return false;
                });
                $('#cancelBtn').unbind('click').click(function () {
                    layer.close(userInfoLayer)
                    $('#userInfo').css('display', 'none')

                    return false
                })
            }


           function addresult(user) {
           
                let userInfoLayer = layer.open({
                    title: '添加检测结果',
                    type: 1,
                    shade: 0,
                    area: ['480px', '600px'], //宽高
                    content: $('#addresultform'),  //调到新增页面
                     end:function (){
                        $('#addresultform').css('display', 'none')
                    },
                    success: function () {

             
                        $("#submitBtn1").attr("lay-filter", "addresult")
                    }
                });
                $("#hid").val(user.id)
               
                form.on('submit(addresult)', function (obj) {
                    let user = obj.field
                    $.ajax({
                        url: '/dengjicheck',
                        method: 'post',
                        {#headers: {"X-CSRFToken": csrftoken},#}
                        data: user,
                        dataType: 'JSON',
                        success: function (res) {
                            //关闭弹出层
                            $('#addresultform').css('display', 'none')
                            layer.close(userInfoLayer)
                            layer.msg('操作成功', {icon: 6});
                            userTable.reload()
                        },
                        error: function (res) {
                            layer.msg('操作失败！', {icon: 5});
                        }
                    });
                    return false
                })
                $('#cancelBtn1').unbind('click').click(function () {
                    layer.close(userInfoLayer)
                    $('#userInfo').css('display', 'none')
                    return false
                })
            }

            //修改
          
           function editUser(user) {
                layer.open({
                    title: '审核',
                    btn: ['确定', '取消'],
                    shade: 0,
                    content: '确定要通过吗？',
                    yes: function (index) {
                        $.ajax({
                            url: '/dengjicheck',
                            method: 'post',
                            {#headers: {"X-CSRFToken": csrftoken},#}
                            data: user,
                            dataType: 'JSON',
                            success: function (res) {
                                //关闭弹出层

                                layer.msg("审核成功", {icon: 6});
                                userTable.reload()

                            },
                            error: function (res) {
                                layer.msg('审核失败！', {icon: 5});
                            }
                        });
                    }
                })
            }


            //删除
            function delUser(user) {
                layer.open({
                    title: '取消操作',
                    btn: ['确定', '取消'],
                    shade: 0,
                    content: '确定要取消吗？',
                    yes: function (index) {
                        $.ajax({
                            url: '/del_hesuanlist',
                            method: 'post',
                            {#headers: {"X-CSRFToken": csrftoken},#}
                            data: user,
                            dataType: 'JSON',
                            success: function (res) {
                                //关闭弹出层

                                layer.msg(res.message, {icon: 6});
                                userTable.reload()

                            },
                            error: function (res) {
                                layer.msg('取消失败！', {icon: 5});
                            }
                        });
                    }
                })
            }
        });
    </script>
    <script type="text/html" id="operate">
        
        <div id="operateBtn">
            {% if role == 2 %}
            <div>
                <a class="text layui-btn " lay-event="addresult">上报检测结果</a>
            </div>
            {% endif %}
               {% if role == 3 %}
            <div>
                <a class="text layui-btn " lay-event="del">取消</a>
            </div>
                {% endif %}
          {% if role == 1 %}
            <div>
                <a class="text layui-btn " lay-event="chkresult">审核</a>
            </div>
           {% endif %}
        </div>
    </script>
    <script type="text/html" id="toolbar">
        <div id="search">
            <div class="" style="width: 800px;">
                <input id="keyword" class="layui-input" autocomplete="off" placeholder="请输入手机号查询用户信息" style="font-size: 12px;width: 200px;float: left">
                <div class="layui-input-block" style="font-size: 12px;width: 300px;float: left">
                    <select class="selectpicker" name="hesuan_result" id="hesuan_result">  <option value="0">请选择检测结果</option>  <option value="2">阳性</option>  <option value="1">阴性</option>
                    </select>
                </div>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button class="layui-btn" data-type="reload" style="font-size: 16px"
                    lay-event="search">
                搜索
            </button>
            </div>
           <!--   <div class="layui-inline">
                核酸等级:
                    <select class="selectpicker" name="title">  <option value="3">高风险</option>  <option value="2">中风险</option>  <option value="1">低风险</option></select>
            </div> -->
            </div>
            
        </div>
        <p>阳性：{{  yangxing_count  }} /总数：{{  total_count  }}  =  阳性率 {% widthratio yangxing_count total_count 100%}% </p>
          {% if role == 3 %}
        <div id="addUser">
            <a class="layui-btn" style="font-size: 16px;background-color: rgba(28, 119, 180,0.8)" lay-event="add">
                <span style="padding-left: 5px">新增预约登记</span>
            </a>
        </div>
        {% endif %}
    </script>
{% endblock %}
